{% extends "../base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="application-engine-logs">
    <bk-table
        :data="data"
        style="margin-top: 15px;">
        <bk-table-column label="模块" prop="module_name">
        </bk-table-column>
        <bk-table-column label="环境" prop="environment">
            <template slot-scope="props">
                $[ props.row.environment | env2zh ]
            </template>
        </bk-table-column>
        <bk-table-column label="是否挂载日志目录(/app/v3logs; /app/logs) 到宿主机" width="350">
            <template slot-scope="props">
                <bk-switcher v-model="props.row.mount_log_to_host" size="large" show-text on-text="挂载" off-text="不挂载" @change="handleChange(props.row)"></bk-switcher>
            </template>
        </bk-table-column>
    </bk-table>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const envChoices = {{ env_choices | to_json }}

    const URLRouter = {
        list: decodeURI("{% url 'wl_api.application.log_config' application.code %}"),
        detail: decodeURI("{% url 'wl_api.application.log_config' application.code %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            mixins: [SubmitMixin],
            el: "#application-engine-logs",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    data: [],
                    application,
                    envChoices,
                }
            },
            mounted: function () {
                this.fetchData()
            },
            methods: {
                fetchData: async function (loading = null) {
                    let el = null;
                    if (loading !== null) {
                        el = loading
                    } else {
                        el = this.$bkLoading({title: '加载中'})
                    }
                    try {
                        await this.$http.get(URLRouter.list).then(res => {
                            this.data = res
                        })
                    } finally {
                        el.hide = true
                    }
                },
                handleChange: async function(row) {
                    const el = this.$bkLoading({title: '加载中'})
                    this.$http.post(URLRouter.detail,
                        {
                            module_name: row.module_name,
                            environment: row.environment,
                            mount_log_to_host: row.mount_log_to_host
                        }
                    ).then(() => {
                        this.fetchData(el)
                    }).finally(() => {
                        el.hide = true
                    })
                },
            }
        })
    })
</script>
{% endblock %}
